<template>
    <div>
        <el-input v-model="searchKeyword" placeholder="请输入搜索关键词" @keyup.enter="searchLocation"/>
        <el-button @click="searchLocation">搜索</el-button>
        <p>停车场经纬度: </p>
        <p v-if="clickedPoint">x:{{ clickedPoint.x }}, y:{{ clickedPoint.y }}</p>
        <div id="dituContent" style="width: 300px; height: 300px;"></div>
        <!-- <button @click="submit">提交</button> -->
    </div>
</template>

<script>
export default {
    mounted() {
        // 引入百度地图 API
        this.loadBaiduMapAPI();
    },
    data() {
        return {
            BMap: null,
            BMAP_ANCHOR_TOP_LEFT: null,
            BMAP_ANCHOR_BOTTOM_RIGHT: null,
            BMAP_ANCHOR_BOTTOM_LEFT: null,
            BMAP_NAVIGATION_CONTROL_LARGE: null,
            map: null,
            searchKeyword: '',
            localSearch: null,
            clickedPoint: null, // 用于存储点击点的经纬度
            markers:[]   //用于存放地图上的标记
        };
    },
    methods: {
        loadBaiduMapAPI() {
            const self = this; // 保存组件实例的引用
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = `https://api.map.baidu.com/api?v=3.0&ak=cXzhE5oTJ5He0OAGjLdJ8epOBLjyEgh0`;
                script.onload = () => {
                    // 存储百度地图相关的全局对象和常量
                    self.BMap = window.BMap;
                    self.BMAP_ANCHOR_TOP_LEFT = window.BMAP_ANCHOR_TOP_LEFT;
                    self.BMAP_ANCHOR_BOTTOM_RIGHT = window.BMAP_ANCHOR_BOTTOM_RIGHT;
                    self.BMAP_ANCHOR_BOTTOM_LEFT = window.BMAP_ANCHOR_BOTTOM_LEFT;
                    self.BMAP_NAVIGATION_CONTROL_LARGE = window.BMAP_NAVIGATION_CONTROL_LARGE;
                    resolve();
                };
                script.onerror = reject;
                document.head.appendChild(script);
            }).then(() => {
                self.initMap();
            }).catch((error) => {
                console.error('百度地图 API 加载失败:', error);
            });
        },
        // 创建和初始化地图函数：
        initMap() {
            try {
                this.createMap(); // 创建地图
                this.setMapEvent(); // 设置地图事件
                this.addMapControl(); // 向地图添加控件
                this.initSearch(); // 初始化搜索功能
                this.addClickEventListener(); // 添加地图点击事件监听器
            } catch (error) {
                console.error('地图初始化失败:', error);
            }
        },
        // 创建地图函数：
        createMap() {
            if (!this.BMap) {
                console.error('百度地图 API 未正确加载');
                return;
            }
            const map = new this.BMap.Map("dituContent"); // 在百度地图容器中创建一个地图
            const point = new this.BMap.Point(118.137064, 24.49917); // 定义一个中心点坐标
            map.centerAndZoom(point, 12); // 设定地图的中心点和坐标并将地图显示在地图容器中
            this.map = map; // 将 map 变量存储在组件实例中
        },
        // 地图事件设置函数：
        setMapEvent() {
            if (!this.map) {
                console.error('地图未正确创建');
                return;
            }
            this.map.enableDragging(); // 启用地图拖拽事件，默认启用(可不写)
            this.map.enableScrollWheelZoom(); // 启用地图滚轮放大缩小
            this.map.enableDoubleClickZoom(); // 启用鼠标双击放大，默认启用(可不写)
            this.map.enableKeyboard(); // 启用键盘上下左右键移动地图
        },
        // 地图控件添加函数：
        addMapControl() {
            if (!this.map ||!this.BMap) {
                console.error('地图或百度地图 API 未正确加载');
                return;
            }
            // 向地图中添加缩放控件
            const ctrl_nav = new this.BMap.NavigationControl({ anchor: this.BMAP_ANCHOR_TOP_LEFT, type: this.BMAP_NAVIGATION_CONTROL_LARGE });
            this.map.addControl(ctrl_nav);
            // 向地图中添加缩略图控件
            const ctrl_ove = new this.BMap.OverviewMapControl({ anchor: this.BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
            this.map.addControl(ctrl_ove);
            // 向地图中添加比例尺控件
            const ctrl_sca = new this.BMap.ScaleControl({ anchor: this.BMAP_ANCHOR_BOTTOM_LEFT });
            this.map.addControl(ctrl_sca);
        },
        // 初始化搜索功能
        initSearch() {
            if (!this.map ||!this.BMap) {
                console.error('地图或百度地图 API 未正确加载');
                return;
            }
            this.localSearch = new this.BMap.LocalSearch(this.map, {
                renderOptions: { map: this.map }
            });
        },
        // 添加地图点击事件监听器
        addClickEventListener() {
            if (this.map) {
                this.map.addEventListener('click', (e) => {
                    const point = e.point;
                    this.clickedPoint = {
                        x: parseFloat(point.lng.toFixed(6)),  // 经度，保留6位小数
                        y: parseFloat(point.lat.toFixed(6))   // 纬度，保留6位小数
                    };
                    // 移除已有的标记
                    if (this.markers.length > 0) {
                        const oldMarker = this.markers[0];
                        this.map.removeOverlay(oldMarker);
                        this.markers = [];
                    }
                    // 创建新标记
                    const marker = new this.BMap.Marker(point);
                    // 将新标记添加到地图上
                    this.map.addOverlay(marker);
                    // 存储新标记以便后续管理
                    this.markers.push(marker);
                    this.$emit('point-clicked', this.clickedPoint);
                });
            }
        },
        //执行搜索
        searchLocation() {
            if (event) {
                event.preventDefault();
            }
            if (this.searchKeyword) {
                this.localSearch.search(this.searchKeyword);
            }
        },

        submit(){
            console.log(this.clickedPoint);
            

        }
    }
};
</script>

<style>

</style>